<template>
  <div class="add-form ">
    <div class="nb-tittle">{{ title }}</div>
    <div v-if="editId" class="step" style="margin-left: -10px">
      <el-steps :active="active" finish-status="finish" process-status="wait" align-center>
        <el-step title="提交">
          <template slot="description">
            <div>{{ data.cr_admin.name }}</div>
            <div>{{ data.create_date }}</div>
          </template>
        </el-step>
        <el-step title="审核">
          <template slot="description">
            <div>赵丹</div>
            <div>{{ data.check_date }}</div>
          </template>
        </el-step>
        <el-step title="审批">
          <template slot="description">
            <div>潘海峰</div>
            <div>{{ data.approve_date }}</div>
          </template>
        </el-step>
        <el-step title="完成">
          <template slot="description">
            <div>沈君</div>
            <div>{{ data.finish_date }}</div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <el-form ref="form" :model="data" inline label-width="100px" hide-required-asterisk class="hx-form">
      <el-row class="r-form">
        <el-col :span="6">
          <el-form-item label="客户名称：" prop="project_id">
            <v-select-s v-model="data.customer_id" action="customerList" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-checkbox v-model="type">和信智控</el-checkbox>
        </el-col>
      </el-row>
      <el-row class="r-form">
        <el-col :span="6">
          <el-form-item label="项目名称：">
            <v-select-s v-model="data.project_id" :query="{ customer_id: data.customer_id}" action="projectList" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="供应商：">
            <v-select-s v-model="data.provider_id" action="providerList" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="pay-class">
        <el-form-item label="报销种类：" />
        <el-form-item class="w70">
          <div class="w70">差旅费</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.travel.sum" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.travel.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.travel.id" type="travel" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-row class="pay-class mr">
        <el-form-item>
          <div class="w70">餐费</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.meal.sum" :precision="2" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.meal.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.meal.id" type="meal" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-row class="pay-class mr">
        <el-form-item>
          <div class="w70">礼品费</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.present.sum" :precision="2" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.present.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.present.id" type="persent" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-row class="pay-class mr">
        <el-form-item>
          <div class="w70">专家费</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.experts.sum" :precision="2" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.experts.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.experts.id" type="experts" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-row class="pay-class mr">
        <el-form-item>
          <div class="w70">办公用品</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.office.sum" :precision="2" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.office.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.office.id" type="office" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-row class="pay-class mr">
        <el-form-item>
          <div class="w70">招标书</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.tender.sum" :precision="2" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.tender.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.tender.id" type="tender" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-row class="pay-class mr">
        <el-form-item>
          <div class="w70">其他</div>
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.other.sum" :precision="2" placeholder="金额" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="f.other.content" placeholder="备注" />
        </el-form-item>
        <el-form-item>
          <Adjunct table_name="baoxiao_detail" :pk="f.other.id" type="other" @category="getF" @del="getId" />
        </el-form-item>
      </el-row>
      <el-form-item style="margin:40px 20px 0" class="nb-form-button">
        <el-button v-if="data.status === 1 && isExamine" type="success" @click="handleStatus(2)">审核</el-button>
        <el-button v-if="data.status === 2 && isAllow" type="success" @click="handleStatus(3)">审批</el-button>
        <el-button v-if="data.status === 3 && isFinish" type="success" @click="handleStatus(4)">确认报销 </el-button>
        <el-button v-if="(editId && isOwn) || !editId" type="primary" @click="submitForm">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import API from '@/api/baoxiao'
// import PROVIDER from '@/api/provider/index'
import Adjunct from '@/components/Upload/Adjunct'
import VSelectS from '@/components/select'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'reload', 'setStorage', 'clearStorage', 'getStorage', 'super', 'examine', 'allow', 'finish'],
  components: { VSelectS, Adjunct },
  data() {
    return {
      data: {
        project: {
          name: '',
          status: null
        },
        cr_admin: {
          name: ''
        }
      },
      f: {
        travel: {
          adjunct_id: []
        },
        meal: {
          adjunct_id: []
        },
        present: {
          adjunct_id: []
        },
        experts: {
          adjunct_id: []
        },
        office: {
          adjunct_id: []
        },
        tender: {
          adjunct_id: []
        },
        other: {
          adjunct_id: []
        }
      },
      type: false,
      title: '',
      editId: '',
      active: 1,
      isSuper: false,
      isExamine: false,
      isAllow: false,
      isFinish: false,
      isOwn: false
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  created() {
    const edit = this.isEdit()
    this.isSuper = this.super()
    this.isExamine = this.examine()
    this.isAllow = this.allow()
    this.isFinish = this.finish()
    if (edit) {
      this.title = '申请报销详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增申请报销'
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    getF(f) {
      this.f[f.data.f]['adjunct_id'].push(f.data.id)
    },
    getId(res) {
      const target = res.id
      this.f[res.f]['adjunct_id'] = this.f[res.f]['adjunct_id'].filter(item => {
        return item !== target
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('baoxiao')
    },
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        this.type = res.data.type === 1
        const f = res.data.fs
        this.active = res.data.status
        if (f) {
          const type = ['travel', 'meal', 'present', 'experts', 'office', 'tender', 'other']
          type.map(item => {
            if (!f[item]) {
              f[item] = {}
            }
          })
        }
        this.f = JSON.parse(JSON.stringify(f))

        if (this.userId === res.data.create_admin_id) {
          this.isOwn = true
        }
      })
    },
    cancel() {
      this.goUrl('/reimbursement')
    },
    submitForm() {
      let noMoney = 0
      for (const i in this.f) {
        if (!this.f[i]['sum']) {
          noMoney += 1
        }
      }
      if (noMoney === 7) {
        this.$message.error('金额全是空的，先别提交了')
        return false
      }
      this.data.f = this.f
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.data.type = this.type === true ? 1 : 2
          if (this.editId) {
            this.update(API, this.data, '更新成功', '/reimbursement')
          } else {
            this.add(API, this.data, '新增成功')
          }
        } else {
          return false
        }
      })
    },
    handleStatus(status) {
      const id = this.editId
      API.status({ id, status }).then(res => {
        if (res.data.error_code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success('操作成功')
          this.cancel()
        }
      })
    }
  }
}
</script>

<style scoped>

.pay-class{
  display: flex;
}
.mr{
  margin-left: 110px;
}
.w70{
  width: 70px;
}
</style>
<style>
.r-form .el-form-item__content{
  width: calc(100% - 100px);
}
</style>
